<template>
  <div class="weather-app">
    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>景区天气预报</h1>
        </el-header>

      <el-container>
        <el-aside width="350px">
          <div>
            <img class="weather-image" :src="scene1" alt="" />
            <img class="weather-image" :src="scene2" alt="" />
            <img class="weather-image" :src="scene3" alt="" />
            <img class="weather-image" :src="scene4" alt="" />
          </div>

        </el-aside>
        <el-main> <el-card class="weather-card" shadow="hover">
          <template v-slot:header>
            <h2>当前天气</h2>
          </template>
          <el-row>
            <el-col :span="8">
              <p>湿度：{{ weatherData.shidu }}</p>
              <p>PM2.5：{{ weatherData.pm25 }}</p>
              <p>PM10：{{ weatherData.pm10 }}</p>
            </el-col>
            <el-col :span="8">
              <p>空气质量：{{ weatherData.quality }}</p>
              <p>温度：{{ weatherData.wendu }}℃</p>
              <p>感冒指数：{{ weatherData.ganmao }}</p>
            </el-col>
            <el-col :span="8">
              <p>{{ weatherData.forecast[0]?.type }}</p>
              <font-awesome-icon :icon="getWeatherIcon(weatherData.forecast[0]?.type)" style="font-size: 85px;"></font-awesome-icon>
            </el-col>
          </el-row>
        </el-card>

          <el-card class="forecast-card" shadow="hover">
            <template v-slot:header>
              <h2>未来天气预报</h2>
            </template>
            <div class="weather-chart" ref="chart"></div>
          </el-card></el-main>

      </el-container>
      </el-container>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

import scene1 from '../../assets/scene1.jpg';
import scene2 from '../../assets/scene2.jpg';
import scene3 from '../../assets/scene3.jpg';
import scene4 from '../../assets/scene4.jpg';

const weatherData = ref({
  shidu: "",
  pm25: "",
  pm10: "",
  quality: "",
  wendu: "",
  ganmao: "",
  forecast: []
});

const chart = ref(null);

onMounted(() => {
  fetchWeatherData();
});

function fetchWeatherData() {
  // 模拟数据获取，实际开发中需替换为接口调用
  weatherData.value = {
    shidu: "65%",
    pm25: 60.0,
    pm10: 83.0,
    quality: "良",
    wendu: "31.2",
    ganmao: "极少数敏感人群应减少户外活动",
    forecast: [
      { ymd: "2024-07-10", high: "34", low: "24", type: "晴", notice: "愿你拥有比阳光明媚的心情" },
      { ymd: "2024-07-11", high: "35", low: "23", type: "多云", notice: "阴晴之间，谨防紫外线侵扰" },
      { ymd: "2024-07-12", high: "33", low: "24", type: "阴", notice: "不要被阴云遮挡住好心情" },
      { ymd: "2024-07-13", high: "33", low: "24", type: "阴", notice: "不要被阴云遮挡住好心情" },
      { ymd: "2024-07-14", high: "34", low: "23", type: "多云", notice: "阴晴之间，谨防紫外线侵扰" },
      { ymd: "2024-07-15", high: "33", low: "25", type: "小雨", notice: "雨虽小，注意保暖别感冒" },
      { ymd: "2024-07-16", high: "26", low: "24", type: "阴", notice: "不要被阴云遮挡住好心情" }
    ]
  };
  initChart();
}

function initChart() {
  const instance = echarts.init(chart.value);
  instance.setOption(getChartOption());
}

function getChartOption() {
  return {
    xAxis: {
      type: 'category',
      data: weatherData.value.forecast.map(item => item.ymd),
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: '最高温度',
        type: 'line',
        data: weatherData.value.forecast.map(item => parseInt(item.high)),
        smooth: true
      },
      {
        name: '最低温度',
        type: 'line',
        data: weatherData.value.forecast.map(item => parseInt(item.low)),
        smooth: true
      }
    ]
  };
}


const getWeatherIcon = (type) => {
  switch (type) {
    case '晴':
      return ['fas', 'sun'];
    case '多云':
      return ['fas', 'cloud'];
    case '小雨':
      return ['fas', 'cloud-showers-heavy'];
    default:
      return ['fas', 'sun']; // 默认为晴天图标
  }
}

</script>

<style scoped>
.weather-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.weather-card {
  width: 600px;
  margin-bottom: 20px;
}

.forecast-card {
  width: 600px;
  margin-bottom: 20px;
}

.weather-chart {
  height: 400px;
}

.image-container {
  display: flex;
  width:100%;
  flex-wrap: wrap;
  gap: 10px; /* 图片之间的间隔 */
}

.weather-image {
  max-width: 100%;
  width:100%;
  height: auto;
  vertical-align: middle;
  padding: 10px;
}
.weather-image:hover {

  transform: scale(1.2); /* 悬停时图标放大 */
  transition: transform 0.3s ease; /* 添加图标放大平滑过渡效果 */
  border-radius: 8px; /* 添加圆角边框 */


}

.common-layout {
  width: 100%; /* 确保内容居中 */
  max-width: 1200px; /* 可根据需要调整最大宽度 */
}



.header h1 {
  text-align: center; /* 文字居中 */
  background-color: #f0f0f0; /* 设置背景色 */
  padding: 20px 0; /* 上下留出一定的空间 */
  font-size: 54px; /* 字体大小 */
  font-family: 'Roboto', sans-serif; /* 选择的字体 */
  margin: 0; /* 去掉默认的外边距 */
}
</style>



